<template>
  <!-- 文件预览 图片可显示缩略图 -->
  <div style="width: 100%">
    <el-tooltip :content="(fileData.name === undefined || fileData.name === null || fileData.name === '') ? fileData.fileName : fileData.name" :placement="tooltipPlacement">
      <template>
        <el-popover :placement="placement" :disabled="disabled || disabledImg" :width="width + 10 + 'px'" :height="height + 20 + 'px'" :trigger="trigger" @show="getPicture">
          <el-image :style="{ width: width + 'px', height: height + 'px' }" :src="pictureUrl" fit="fit">
            <div
              slot="placeholder"
              v-loading="true"
              :element-loading-text="$t('拼命加载中')"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)"
              class="image-slot"
              style="height: 100%; width: 100%;"
            >{{ $t('加载中') }}</div>
          </el-image>
          <el-link slot="reference" class="link-a" type="primary" :underline="false" @click="onlinePreview(fileData)">{{ fileData.name || fileData.fileName }}</el-link>
        </el-popover>
      </template>
    </el-tooltip>
    <!-- 预览 -->
    <OnlinePreview ref="OnlinePreview" />
  </div>
</template>

<script>
import { config } from '@/utils'
import { getToken } from '@/utils/auth'
import { ACCEPT_CONFIG } from '@/utils/config'

export default {
  props: {
    // 文件ID
    fileData: {
      type: Object,
      default: () => {}
    },
    // 选填 指定文件ID. (例如fileData下的ID不是文件ID. 也不叫fileId. 需要单独指定这个ID)
    fileId: {
      type: String,
      default: ''
    },
    // 缩略显示位置
    placement: {
      type: String,
      default: 'left'
    },
    // 文字提示显示位置
    tooltipPlacement: {
      type: String,
      default: 'top-start'
    },
    // 缩略图宽度
    width: {
      type: Number,
      default: 200
    },
    height: {
      type: Number,
      default: 200
    },
    // 触发方式: hover: 悬浮，click: 点击，focus: 按住, manual: 手动
    trigger: {
      type: String,
      default: 'hover'
    },
    // 是否启用缩略图展示, false: 展示
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      pictureUrl: '',
      disabledImg: false
    }
  },
  mounted() {

  },
  methods: {
    // 预览附件
    onlinePreview(row) {
      var id = row.id
      if (id === null || id === undefined || id === '') {
        id = row.fileId
      }
      if (this.fileId !== undefined && this.fileId !== null && this.fileId !== '') {
        id = this.fileId
      }
      this.$refs.OnlinePreview.onlinePreviewFile(id)
    },
    getPicture() {
      console.log('悬浮触发中')
      // 获取文件后缀
      this.disabledImg = false
      var fileName = (this.fileData.name === undefined || this.fileData.name === null || this.fileData.name === '') ? this.fileData.fileName : this.fileData.name
      var fileSuffix = fileName.substring(fileName.lastIndexOf('.'))
      if (ACCEPT_CONFIG.image.includes(fileSuffix.toLocaleLowerCase())) {
        var fileId = (this.fileData.id === undefined || this.fileData.id === null || this.fileData.id === '') ? this.fileData.fileId : this.fileData.id
        if (this.fileId !== undefined && this.fileId !== null && this.fileId !== '') {
          fileId = this.fileId
        }
        this.pictureUrl = config.baseURL + '/onlinePreview/getFileThumbnail?fileId=' + fileId + '&Authorization=' + getToken()
      } else {
        this.disabledImg = true
      }
    }
  }
}
</script>

<style scoped>

</style>
